<script>
import { ref, onMounted } from "vue";
import axios from "../../api/axios.config";
import router from "@/router";
import { ElMessage } from "element-plus";

export default {
  setup() {
    let goodsList = ref([]);
    let searchQuery = ref("");
    let loading = ref(false);
    // let offset = ref(0);
    let totalPages = ref(0);
    let total = ref(0);
    let currentPage = ref(1);
    let pageSize = 12;

    // 获取商品数据
    const fetchGoods = async () => {
      try {
        axios.get(`goods/findall?limit=12&offset=${(currentPage.value-1)*pageSize}`).then((response) => {
          console.log(response);
          goodsList.value = response.data.data.data;
          total.value = response.data.data.total;
          console.log("总页数",total.value);
        });

      } catch (error) {
        ElMessage.error("商品加载失败");
        console.error(error);
      } finally {
        loading.value = false;
      }
    };

    // 处理搜索
    const handleSearch = () => {
      // fetchGoods();
      currentPage.value = 1;
      axios.get(`goods/findbyname?goods_name=${searchQuery.value}&limit=12&offset=${(currentPage.value-1)*pageSize}`).then((response) => {
        console.log(response);
        goodsList.value = response.data.data.data;
        total.value = response.data.data.total;
        console.log("总页数",total.value);
      });
    };

    const showDetail = (goods) => {
      goods.browse_count += 1;
      console.log(goods);
      let goods_id = goods.goods_id;
      sessionStorage.setItem('currentGoods', JSON.stringify(goods))
      axios.put(`goods/browse/${goods_id}`);
      console.log(goods_id);
      router.push({
        path: "/goods/detail",
      });
    };

    onMounted(() => {
      fetchGoods();
    });

    return {
      goodsList,
      searchQuery,
      loading,
      handleSearch,
      totalPages,
      total,
      currentPage,
      pageSize,
      fetchGoods,
      showDetail,
    };
  },
};
</script>

<template>
  <div class="home-container">
    <div class="search-bar">
      <el-input
        v-model="searchQuery"
        placeholder="搜索商品名称"
        clearable
        @keyup.enter="handleSearch"
      >
        <template #append>
          <el-button type="primary" @click="handleSearch">
            <el-icon><search /></el-icon>
          </el-button>
        </template>
      </el-input>
    </div>

    <el-row :gutter="20" class="goods-list">
      <el-col
        v-for="goods in goodsList"
        :key="goods.goods_id"
        :xs="12"
        :sm="8"
        :md="6"
        @click="showDetail(goods)"
        class="goods-col"
      >
        <el-card shadow="hover" class="goods-card">
          <div class="image-container">
            <img
              :src="goods.img_urls[0] || '/placeholder.jpg'"
              alt="商品图片"
              class="goods-image"
            />
          </div>

          <div class="goods-info">
            <h3 class="goods-title">{{ goods.goods_name }}</h3>

            <div class="price-section">
              <span class="price">¥{{ goods.goods_price.toFixed(2) }}</span>
              <span class="stock">库存: {{ goods.goods_stock }}</span>
            </div>

            <div class="meta-info">
              <el-tag type="info" size="small"> 成色: {{ goods.goods_detail }}成新 </el-tag>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
  <div class="page-cut" >
    <el-pagination
    background
    layout="prev, pager, next"
    v-model:current-page="currentPage"
    :page-size=pageSize
    :total=total
    @current-change="fetchGoods" />
  </div>
</template>

<style scoped>

.page-cut {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

/* 可选：调整分页器间距 */
.el-pagination {
  padding: 10px 0;
}

.home-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.search-bar {
  margin-bottom: 30px;
}

.goods-list {
  margin-bottom: 30px;
}

.goods-col {
  margin-bottom: 20px;
}

.goods-card {
  height: 100%;
  transition: transform 0.3s;
}

.goods-card:hover {
  transform: translateY(-5px);
}

.image-container {
  height: 200px;
  overflow: hidden;
  border-radius: 4px;
}

.goods-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.goods-image:hover {
  transform: scale(1.05);
}

.goods-info {
  padding: 15px;
}

.goods-title {
  font-size: 14px;
  height: 40px;
  line-height: 1.4;
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.price-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.price {
  color: #ff4444;
  font-size: 18px;
  font-weight: bold;
}

.stock {
  color: #666;
  font-size: 12px;
}

.meta-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
